<template>

  <el-form :model="this.userDetail" label-width="120px">

    <el-button type="primary" @click="goBack()" class="backBtn">返回</el-button>

    <el-form-item label="ID">
      <!-- &nbsp; 表示空格，在当前div没有数据展示的时候，仍然可以显示样式 -->
      <div class="detail">&nbsp; {{ this.userDetail.id }}</div>
    </el-form-item>

    <el-form-item label="账号">
      <div class="detail">&nbsp; {{ this.userDetail.loginAct }}</div>
    </el-form-item>

    <el-form-item label="密码">
      <div class="detail">&nbsp; **********</div>
    </el-form-item>

    <el-form-item label="姓名">
      <div class="detail">&nbsp; {{ this.userDetail.name }}</div>
    </el-form-item>

    <el-form-item label="手机">
      <div class="detail">&nbsp; {{ this.userDetail.phone }}</div>
    </el-form-item>

    <el-form-item label="邮箱">
      <div class="detail">&nbsp; {{ this.userDetail.email }}</div>
    </el-form-item>

    <el-form-item label="账号未过期">
      <div class="detail">&nbsp; {{ this.userDetail.accountNoExpired === 1 ? '未过期' : '已过期' }}</div>
    </el-form-item>

    <el-form-item label="密码未过期">
      <div class="detail">&nbsp; {{ this.userDetail.credentialsNoExpired === 1 ? '未过期' : '已过期' }}</div>
    </el-form-item>

    <el-form-item label="账号未锁定">
      <div class="detail">&nbsp; {{ this.userDetail.accountNoLocked === 1 ? '未锁定' : '已锁定' }}</div>
    </el-form-item>

    <el-form-item label="账号是否启用">
      <div class="detail">&nbsp; {{ this.userDetail.accountEnabled === 1 ? '已启用' : '未启用' }}</div>
    </el-form-item>

    <el-form-item label="创建时间">
      <div class="detail">&nbsp; {{ this.userDetail.createTime }}</div>
    </el-form-item>

    <el-form-item label="创建人">
      <div class="detail">&nbsp; {{ this.userDetail.createByDO.name }}</div>
    </el-form-item>

    <el-form-item label="编辑时间">
      <div class="detail">&nbsp; {{ this.userDetail.editTime }}</div>
    </el-form-item>

    <el-form-item label="编辑人">
      <div class="detail">&nbsp; {{ this.userDetail.editByDO.name }}</div>
    </el-form-item>

    <el-form-item label="最近登录时间">
      <div class="detail">&nbsp; {{ this.userDetail.lastLoginTime }}</div>
    </el-form-item>

  </el-form>

</template>

<script>
  import {doGet} from "../http/httpRequest.js";
  import {messageTip} from "../util/util.js";

  export default {
    name: "UserDetailView",

    data() {
      return {
        // 用户详情对象
        userDetail: {
          // 对象中的引用数据类型变量需要声明出来，否则使用插值语法时会报错，找不到变量
          createByDO: { },  // 创建者对象
          editByDO: { }     // 编辑者对象
        },

        // 角色数组
        roleList: []
      }
    },

    // 钩子函数，页面渲染完成后自动调用
    mounted() {
      this.loadUserDetail();
    },

    methods: {
      // 加载用户详情
      loadUserDetail() {
        // 从路由地址上获取id参数，这里参数的名字要和动态路由中配置的名字相同
        let id = this.$route.params.id;
        // 向后端发送请求
        doGet("/api/user/detail/" + id, { }).then( (resp) => {
          if (resp.data.code === 200) {
            // 给用户详情对象赋值
            this.userDetail = resp.data.data;
            // 判断创建者和编辑者是否为null，如果为null则赋一个空对象，防止控制台报错
            if (!this.userDetail.createByDO) {
              this.userDetail.createByDO = { };
            }
            if (!this.userDetail.editByDO) {
              this.userDetail.editByDO = { };
            }
          } else {
            messageTip("用户详情获取失败", "warning")
          }
        })
      },

      // 返回
      goBack() {
        // 跳转到上一个路由地址（/dashboard/user），默认回到用户列表的第一页
        this.$router.go(-1);
      }
    }
  }
</script>

<style scoped>

  /* 用户详情信息 */
  .detail {
    height: 30px;
    width: 100%;
    background-color: #f6f7fb;    /* 背景色 */
    padding-left: 2px;            /* 左侧内边距 */
    border: 1px solid #e6e7eb;    /* 1px 边框宽度， solid 实线边框， #e6e7eb 边框颜色 */
    border-radius: 4px;           /* 边框角的弧度 */
  }

  /* 返回按钮 */
  .backBtn {
    margin-bottom: 20px;          /* 下边距 */
  }

</style>

